<template>
  <view>
    <view class="wrap bd">
      <view class="u-tabs-box">
        <u-tabs-swiper
          activeColor="#18C7E2"
          inactive-color="#717171"
          ref="tabs"
          height="120"
          bar-width="60"
          :list="listtitle"
          :current="current"
          @change="change"
          :is-scroll="false"
          class="bd"
          swiperWidth="750"
          font-size="32"
        ></u-tabs-swiper>
      </view>
      <swiper
        class="swiper-box"
        :current="swiperCurrent"
        @transition="transition"
        @animationfinish="animationfinish"
      >
        <swiper-item class="swiper-item bd t1" v-for="(item, idx) in list">
          <scroll-view scroll-y style="height: 100%; width: 100%">
            <view
              style="text-align: center; font-size: 32rpx; line-height: 96rpx"
              >{{ item.schemeName }}</view
            >
            <view
              v-html="item.schemeContent"
              style="text-indent: 2em; line-height: 72rpx; padding: 10rpx"
            ></view>
          </scroll-view>
        </swiper-item>
      </swiper>
    </view>
    <u-toast ref="uToast" />
  </view>
</template>

<script>
import { parseTime } from "@/utils/parseTime";
export default {
  filters: {
    parseTime(time) {
      var date = new Date(time);
      return parseTime(time, "{y}-{m}-{d}");
    },
  },
  data() {
    return {
      list: [], //预约家庭列表
      listtitle: [],
      current: 0,
      swiperCurrent: 0,
      tabsHeight: 0,
      dx: 0,
      listAd: [], //预约登记疫苗
    };
  },
  onLoad() {
    this.getVerb();
  },
  onReady() {
    // this.getUiStyle();
  },
  methods: {
    getUiStyle() {
      var style = plus.navigator.getUiStyle();
      if ("dark" == style) {
        console.log("当前为暗黑模式");
        uni.setTabBarStyle({
          backgroundColor: "#1B1C1E",
        });
        uni.setNavigationBarColor({
          frontColor: "#ffffff",
          backgroundColor: "#1B1C1E",
          animation: {
            duration: 400,
            timingFunc: "easeIn",
          },
        });
      } else {
        console.log("当前为普通模式");
      }
    },
    // tab栏切换
    change(index) {
      this.swiperCurrent = index;
    },
    // 获取疫苗登记信息
    getVerb() {
      let self = this;
      this.config
        .get("/inoculationScheme/getInoculationScheme", {})
        .then((res) => {
          //console.log(res)
          if (res.data.code === 200) {
            this.list = res.data.data;
            res.data.data.forEach((item, index) => {
              this.listtitle.push({ name: item.tabName });
            });
          } else {
          }
        });
    },
    transition({ detail: { dx } }) {
      this.$refs.tabs.setDx(dx);
    },
    animationfinish({ detail: { current } }) {
      this.$refs.tabs.setFinishCurrent(current);
      this.swiperCurrent = current;
      this.current = current;
    },
  },
};
</script>
<style scoped lang="scss" scoped>
/* #ifndef H5 */
page {
  height: 100%;
  background-color: #f2f2f2;
}

/* #endif */

uni-view.u-tabs-box {
  border-top: 1px solid #eeeeee;
  border-bottom: 1px solid #eeeeee;
}

.carinfo {
  border-top: 1px solid #eeeeee;
  margin-bottom: 25rpx;
}

.wrap {
  flex-direction: column;
  height: calc(100vh - var(--window-top));
  width: 100%;
  margin-bottom: 30rpx;
  position: fixed;
  background-color: #ffffff;
}

.swiper-box {
  flex: 1;
  height: 100vh;
}

.swiper-item {
  height: 100%;
  background-color: white;
}
</style>
<style scoped>
@media (prefers-color-scheme: closedark) {
  .bd {
    background-color: #1b1c1e !important;
  }
  .bd1 {
    background-color: #38383c !important;
  }
  .t1 {
    color: #ccc !important;
  }
}
</style>